<template>
  <div class="add">
    <input type="text" v-model.trim="msg" />
    <button @click="collectionAdd">添加</button>
  </div>
</template>

<script>
/* 
目的：收集到新添加的内容，将其添加到arr
子传父
初始化数据在哪里，对该数据的增删改查在哪里

v-model收集到数据

*/
export default {
  data() {
    return {
      msg: "",
    };
  },
  methods: {
    collectionAdd() {
      //查看是否能收集到数据
      console.log(this.msg);

      //   将得到的数据传递给父组件app  子传父
      this.$emit("addItem", this.msg);
      //清空操作
      this.msg = "";
    },
  },
};
</script>

<style lang="scss" scoped>
.add {
  display: flex;
  justify-content: center;
}
</style>